<template>
  <div class="container">
    <div class="orderNo">订单号：{{ this.$route.params.orderNo }}</div>
    <div class="dealCont">
      <div :class="classObject3">
        <div class="dealInfo">
          <div class="time">{{ processData.finishTime }}</div>
          <div class="title">处理结果</div>
          <div class="content">
            {{ processData.finishTime ? '处理完成' : '暂无结果' }}
          </div>
        </div>
      </div>
      <div :class="classObject2">
        <div class="time">{{ processData.platDealTime }}</div>
        <div class="dealInfo">
          <div class="title">客服介入</div>
          <div class="content" v-if="dealStep == 1">暂无客服介入</div>
          <div v-else>
            <div class="content">
              处理意见：{{ DealStatus[processData.platDealStatus] }}
            </div>
            <div class="content">
              举证材料：{{ processData.platDealReason || '无' }}
            </div>
            <div class="imgList">
              <van-image
                fit="contain"
                v-if="processData.platDealImage1"
                :src="processData.platDealImage1"
              />
              <van-image
                fit="contain"
                v-if="processData.platDealImage2"
                :src="processData.platDealImage2"
              />
            </div>
          </div>
        </div>
      </div>
      <div :class="classObject1">
        <div class="time">{{ processData.merchantDealTime }}</div>
        <div class="dealInfo">
          <div class="title">卖家自查</div>
          <div v-if="dealStep == 1">
            <div class="content">
              处理意见：
              <select @change="changeType" :value="dealType" class="selectDeal">
                <option value="NOT_DEAL">未处理</option>
                <option value="AGREE">同意</option>
                <option value="REFUSE">拒绝</option>
              </select>
            </div>
            <div class="content">
              附件/证明材料：
              <van-field
                v-model="appealReason"
                rows="2"
                autosize
                type="textarea"
                maxlength="100"
                placeholder="请输入（最多输入100字）"
                show-word-limit
                class="textarea"
              />
            </div>
            <div class="content">
              <van-uploader
                :after-read="onRead"
                v-model="fileList"
                multiple
                :max-count="2"
              />
            </div>
            <div class="sureOperate" v-if="dealType !== 'NOT_DEAL'">
              <van-button
                size="small"
                block
                round
                color="#ff7536"
                @click="submitInfo"
              >
                提交
              </van-button>
            </div>
          </div>
          <div v-else>
            <div class="content">
              卖家自查结果：{{ DealStatus[processData.merchantDealStatus] }}
            </div>
            <div class="content">
              附件/证明材料：
              {{ processData.merchantDealReason || '暂无材料' }}
            </div>
            <div class="imgList">
              <van-image
                fit="contain"
                v-if="processData.merchantDealImage1"
                :src="processData.merchantDealImage1"
              />
              <van-image
                fit="contain"
                v-if="processData.merchantDealImage2"
                :src="processData.merchantDealImage2"
              />
            </div>
          </div>
        </div>
      </div>
      <div :class="classObject0">
        <div class="time">{{ processData.createTime }}</div>
        <div class="dealInfo">
          <div class="title">投诉创建</div>
          <div class="content">投诉理由：{{ processData.appealReason }}</div>
          <div class="content">
            转件至卖家时间：{{ processData.createTime }}
          </div>
          <div class="imgList">
            <van-image
              fit="contain"
              v-if="processData.appealImage1"
              :src="processData.appealImage1"
            />
            <van-image
              fit="contain"
              v-if="processData.appealImage2"
              :src="processData.appealImage2"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { process_get } from '@/api/front/web/order/appeal'
import { upload_pic_post } from '@/api/app/file_upload'
import { refuse_post } from '@/api/front/web/order/merchant'
export default {
  data() {
    return {
      dealStep: 0,
      appealReason: '',
      fileList: [],
      processData: {},
      dealType: 'NOT_DEAL',
      DealStatus: {
        NOT_DEAL: '未处理',
        AGREE: '同意',
        REFUSE: '拒绝',
      },
    }
  },
  created() {
    this.queryData()
  },
  methods: {
    queryData() {
      process_get({
        data: { orderNo: this.$route.params.orderNo },
      }).then((data) => {
        this.processData = data
        if (data.finishTime) {
          this.dealStep = 3
        } else if (data.platDealTime) {
          this.dealStep = 2
        } else if (data.merchantDealTime) {
          this.dealStep = 1
        }
      })
    },
    changeType(e) {
      this.dealType = e.target.value
    },
    submitInfo() {
      if (this.dealType === 'AGREE') {
        if (!this.appealReason) {
          this.$notify({
            message: '同意原因必填哦！',
            type: 'warning',
          })
          return
        }
        const fileList = this.fileList
        refuse_post({
          data: {
            orderNo: this.processData.orderNo,
            appealReason: this.appealReason,
            appealImage1: fileList[0] ? fileList[0].path : '',
            appealImage2: fileList[1] ? fileList[1].path : '',
            appealId: this.processData.merchantDealId,
          },
        }).then(() => {
          this.$notify({
            message: '确认退款成功！',
            type: 'success',
            onClose: () => {
              this.queryData()
            },
          })
        })
      } else {
        if (!this.appealReason) {
          this.$notify({
            message: '拒绝原因必填哦！',
            type: 'warning',
          })
        } else {
          const fileList = this.fileList
          refuse_post({
            data: {
              orderNo: this.processData.orderNo,
              appealReason: this.appealReason,
              appealImage1: fileList[0] ? fileList[0].path : '',
              appealImage2: fileList[1] ? fileList[1].path : '',
              appealId: this.processData.merchantDealId,
            },
          }).then(() => {
            this.$notify({
              message: '提交成功！',
              type: 'success',
              onClose() {
                this.queryData()
              },
            })
          })
        }
      }
    },
    onRead(file) {
      const formData = new FormData()
      formData.append('file', file.file)
      console.log(formData.get('file'))
      upload_pic_post({
        data: formData,
        headers: { 'Content-Type': 'multipart/form-data' },
      }).then((data) => {
        this.fileList[this.fileList.length - 1].path = data[0]
      })
    },
  },
  computed: {
    classObject0() {
      return {
        step: true,
        active: this.dealStep === 0,
        hasActive: this.dealStep >= 0,
      }
    },
    classObject1() {
      return {
        step: true,
        active: this.dealStep === 1,
        hasActive: this.dealStep >= 1,
      }
    },
    classObject2() {
      return {
        step: true,
        active: this.dealStep === 2,
        hasActive: this.dealStep >= 2,
      }
    },
    classObject3() {
      return {
        step: true,
        active: this.dealStep === 3,
        hasActive: this.dealStep >= 3,
      }
    },
  },
}
</script>

<style lang="scss" scoped src="./styles/index.scss"></style>
